
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>안전관리시스템 - 출역관리시스템</title>
    <link rel="stylesheet" href="css/style.css">  
    <link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.css">  
      
    <script src="js/jquery-1.10.2.js"></script>
     <script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body class="sub">
<div class="wrap">	
    <div class="top"><p>홍길동(gdhong)님 로그인중<a href="#">로그아웃</a></p></div>     
	<!-- head START -->
    <div class="head">
        <h1>안전관리시스템</h1>
        <div class="gnb">
            <ul>
                <li><a href="#" class="on">근로자 관리</a></li>
                <li><a href="#">출역관리</a></li>
                <li class="nobg"><a href="#">게시판</a></li>
                <li class="sys"><a href="#">시스템관리</a></li>
            </ul>
        </div>  
    </div>
	<!-- head END -->
	<!-- container START -->
    <div class="container">
		<!-- nav START -->
        <div class="nav">
            <h2>근로자 관리</h2>
            <ul>
                <li class="over"><a href="#">근로자명부</a></li>        
                <li><a href="#">일괄 퇴직처리</a></li>
                <li><a href="#">근로자 업체이직</a></li>
                <li><a href="#">안전보호 지급현황</a></li>
            </ul>
        </div>
		<!-- nav END -->
		<!-- contents START -->
		<div class="contents">
			<h3>근로자 연명부</h3>
			<div class="search_area">
				<form action="">
					<fieldset>
					<legend>근로자 검색</legend>
					<label for="project" class="first">프로젝트</label><input type="text" class="pro" id="project" /><button type="button"><img src="img/btn_search.png" alt="검색" /></button><input type="text" disabled="disabled" class="prodis" value="프로젝트 NO_4645698" />
					<label for="company">협력업체</label><input type="text" class="com" id="company" /><button type="button"><img src="img/btn_search.png" alt="검색" /></button><input type="text" disabled="disabled" class="comdis" value="디알시티에스 주식회사"/>
					<span class="labeltic">취업일자</span><input type="text" value="2014-10-12" class="jday" /> ~ <input type="text" value="2014-10-12" class="jday" /> 
					<label for="names">성명</label><input type="text" id="names" class="namew" />
					<input type="image" class="btn_sch" src="img/btn_search_txt.png" alt="검색" />
					</fieldset>
				</form>
			</div>
			<div class="wrap_tbl">
			<table class="tbl">
					<caption><span>근로자목록</span></caption>
					<colgroup>
						<col style="width:3%;">
						<col style="width:3%;">
						<col style="width:11%;">
						<col style="width:10%;">
						<col style="width:10%;">
						<col style="width:8%;">
						<col style="width:13%;">
						<col style="width:13%;">
						<col style="width:13%;">
						<col style="width:13%;">
					</colgroup>
					<thead>
						<tr>
							<th scope="col"><input type="checkbox" title="전체 선택"></th>
							<th scope="col">NO</th>
							<th scope="col">성명</th>
							<th scope="col">생년월일</th>
							<th scope="col">협력업체</th>
							<th scope="col">직종</th>
							<th scope="col">연락처</th>
							<th scope="col">취업일자</th>
							<th scope="col">퇴직일자</th>
							<th scope="col">재직여부</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>	
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>	
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>	
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td><td>123456</td><td>홍길동</td><td>1978-10-10</td><td>(주)디알건축</td><td>방수공</td><td>010-0000-0000</td><td>2014-10-11</td><td>2014-12-12</td><td>퇴사</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="wrap_list_bot">
				<!-- 페이징 START -->
				<div class="pagenate">
					<a href="#" class="pageMove">
					<img src="img/btn_first.png" alt="처음으로">
					</a>
					<a href="#" class="pageMove">
					<img src="img/btn_prev.png" alt="이전으로">
					</a>
					<em class="pageNum current">1</em>
					<a href="#" class="pageNum">2</a>
					<a href="#" class="pageNum">3</a>
					<a href="#" class="pageNum">4</a>
					<a href="#" class="pageNum">5</a>
					<a href="#" class="pageNum">6</a>
					<a href="#" class="pageNum">7</a>
					<a href="#" class="pageNum">8</a>
					<a href="#" class="pageNum">9</a>
					<a href="#" class="pageMove">
					<img src="img/btn_next.png" alt="다음으로">
					</a>
					<a href="#" class="pageMove">
					<img src="img/btn_last.png" alt="마지막으로">
					</a>
				</div>
				<!-- 페이징 END -->
				<div class="btns">
					<button type="button" onclick="$('#labor_reg').show();">
						<img src="img/btn_resist.png" alt="등록" />
					</button>
					<button type="button">
						<img src="img/btn_excel.png" alt="엑셀" />
					</button>
				</div>

			</div>
			
		</div>
		<!-- contents END -->
    </div>
	<!-- container END -->
    <div class="foot">
        <div class="inner_foot">
        <p>경기도 성남시 중원구 둔촌대로 555 (선일테크노피아) 712호    TEL : 031-702-0071    FAX : 032-702-0061 <br /> Copyright ⓒ 2014  Dr.CTS Co.,Ltd. All Rights Reserved</p>
        </div>
    </div>
</div>
<!-- LAYER START -->
<div class="lay_wrap" id="labor_reg" style="display:none;">
	<div class="dim">&nbsp;</div>
	<div class="lay_pop">
		<h2>근로자 등록</h2>
		<div class="lay_con">
			<h3>근로자 연명부</h3>
			<form action="">
				<!-- 기본정보 START -->
				<div class="default_info">
				<fieldset>
					<legend>기본정보</legend>
					<div class="de_left">
					<h4>기본정보</h4>
					<table class="lay_tbl">
						<colgroup>
							<col style="width:84px;">
							<col style="width:350px;">
							<col style="width:84px">
							<col style="width:333px;">
						</colgroup>
						<tbody>
							<tr>
								<th scope="row">Project</th><td colspan="3"><input type="text" class="def_scr" /><button type="button"><img src="img/btn_pop_search.png" alt="검색 "></button><input type="text" class="long"/></td>
							</tr>
							<tr>
								<th scope="row">협력업체</th><td colspan="3"><input type="text" class="def_scr" /><button type="button"><img src="img/btn_pop_search.png" alt="검색 "></button><input type="text" class="long"/></td>
							</tr>
							<tr>
								<th scope="row">이름</th><td><input type="text" class="def" /></td><th scope="row">주민등록번호</th><td><input type="text" title="주민등록번호 앞자리" /> - <input type="text" title="주민등록번호 뒷자리" /></td>
							</tr>
							<tr>
								<th scope="row">취업일자</th><td><input type="text" class="date" id="datepicker1"/></td><th scope="row">퇴직일자</th>
							<td><input type="text" class="date" id="datepicker2"/></td>
							</tr>
							<tr>
								<th scope="row">직종</th><td><input type="text" class="def" /></td><th scope="row">혈액</th><td><input type="text" /></td>
							</tr>
							<tr>
								<th scope="row">휴대폰</th><td><input type="text" class="tel"/> - <input type="text" class="tel"/> - <input type="text" class="tel"/></td><th scope="row">전화번호</th><td><input type="text" class="tel"/> - <input type="text" class="tel"/> - <input type="text" class="tel"/></td>
							</tr>
							<tr>
								<th scope="row">주소</th><td colspan="3"><input type="text" value="" placeholder="우편번호"  class="def"/><button type="button"><img src="img/btn_pop_search.png" alt="검색 "></button><input type="text" class="long" placeholder="주소" /></td>

							</tr>
							<tr>
								<th scope="row">고용보험</th>
								<td colspan="3">
									<input type="checkbox" id="ins1"  class="check_box"/><label for="ins1">고용보험 가입여부</label>
									<input type="checkbox" id="ins2"  class="check_box"/><label for="ins2">건강보험 가입여부</label>
									<input type="checkbox" id="ins3"  class="check_box"/><label for="ins3">퇴직공제대상자 여부</label></td>
							</tr>
						</tbody>
					</table>
					</div>
					<div class="labor_img">
					<img src="img/img_labor.png" alt="근로자 사">
					</div>	
				</fieldset>
				</div>
				<!-- 기본정보 END -->
				<!-- 안정보호구 START -->
				<div class="safe">
					<fieldset>
					<legend>안전보호구</legend>
					<h4>안전보호구</h4>
					<table class="lay_tbl">
						<colgroup>
							<col style="width:84px;">
							<col style="width:350px;">
							<col style="width:84px">
							<col style="width:493px;">
						</colgroup>
						<tbody>
							<tr>
								<th scope="row">지급일자</th><td><input type="text" class="date" id="datepicker3"/></td><th scope="row">교육일자</th>
							<td><input type="text" class="date" id="datepicker4"/></td>
							</tr>
							<tr>
								<th scope="row">지급품목</th><td colspan="3"><button type="button"><img src="img/btn_all.png" alt="전체선"></button>
								<input type="checkbox" id="item1"  class="check_box"/><label for="item1">안전모</label>
								<input type="checkbox" id="item2"  class="check_box"/><label for="item2">안전화</label>
								<input type="checkbox" id="item3"  class="check_box"/><label for="item3">안전벨트</label>
								<input type="checkbox" id="item4"  class="check_box"/><label for="item4">각반</label>
								<input type="checkbox" id="item5"  class="check_box"/><label for="item5">기타</label>
								<input type="text"  class="mid" />
								</td>
							</tr>
						</tbody>
					</table>
				</fieldset>
				</div>
				<!-- 안정보호구 END -->
				<!-- 근로자 사진선택 START -->
				<div class="photo">
				<h4>근로자 사진</h4>
				<input type="file" title="근로자 사진선택" />
				</div>
				<!-- 근로자 사진 END -->
				<div class="lay_btns">
				<input type="image" src="img/btn_save.png" alt="저장" />
				<a href="#" onclick="$('#labor_reg').hide();"><img src="img/btn_close_txt.png" alt="닫기" /></a>
				</div>
			</form>
		</div>
		<a href="#" class="close" onclick="$('#labor_reg').hide();"><img src="img/btn_close.png" alt="닫기" /></a>
	</div>
	
</div>
<script>
  $(function() {
    $( "#datepicker1" ).datepicker({
      showOn: "button",
      buttonImage: "img/btn_cal.png",
      buttonImageOnly: true,
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true
  });
     $( "#datepicker2" ).datepicker({
      showOn: "button",
      buttonImage: "img/btn_cal.png",
      buttonImageOnly: true,
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true
    });
      $( "#datepicker3" ).datepicker({
      showOn: "button",
      buttonImage: "img/btn_cal.png",
      buttonImageOnly: true,
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true
    });
       $( "#datepicker4" ).datepicker({
      showOn: "button",
      buttonImage: "img/btn_cal.png",
      buttonImageOnly: true,
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true
    });
  });
  </script>

<!-- LAYER END -->
</body>